<script setup lang="ts">
	// @ts-nocheck
	// * 电商平台监控页
	import Trend from '@/components/Trend.vue'
	import Map from '@/components/Map.vue'
	import Seller from '@/components/Seller.vue'
	import Rank from '@/components/Rank.vue'
	import Hot from '@/components/Hot.vue'
	import Stock from '@/components/Stock.vue'
	import FullScreen from '@/components/FullScreen.vue'
	import { GlobalStore } from '@/stores/global'
	import { getThemeValue } from '@/utils/theme_utils'
	import { computed, ref } from 'vue'
	import qh1 from '@/assets/img/qiehuan_dark.png'
	import qh2 from '@/assets/img/qiehuan_light.png'
	import border1 from '@/assets/img/header_border_dark.png'
	import border2 from '@/assets/img/header_border_light.png'

	const globalStore = GlobalStore()

	// 图表组件实例
	const trendRef = ref(null)
	const sellerRef = ref(null)
	const mapRef = ref(null)
	const rankRef = ref(null)
	const hotRef = ref(null)
	const stockRef = ref(null)

	// 容器样式
	const containerStyle = computed(() => ({
		background: getThemeValue(globalStore.theme).backgroundColor,
		color: getThemeValue(globalStore.theme).titleColor
	}))
</script>

<template>
	<div class="screen_container" :style="containerStyle">
		<!-- 头部 -->
		<div class="screen_header" :style="{ backgroundImage: `url(${globalStore.theme === 'ys' ? border1 : border2})` }">
			<!-- Logo -->
			<div class="logo"><img src="@/assets/logo.svg" /></div>
			<!-- 标题 -->
			<div class="title">电商销售监控平台</div>
			<!-- 右侧内容 -->
			<div class="title-right">
				<img :src="globalStore.theme === 'ys' ? qh1 : qh2" class="hf" @click="globalStore.changeTheme" />
				<span class="datetime">2022-10-01 12:09:10</span>
			</div>
		</div>
		<!-- 主体 -->
		<div class="screen_body">
			<div class="screen_left">
				<FullScreen class="screen_top" @resize="trendRef.resize()"><Trend ref="trendRef" /></FullScreen>
				<FullScreen class="screen_bottom" @resize="sellerRef.resize()"><Seller ref="sellerRef" /></FullScreen>
			</div>
			<div class="screen_center">
				<FullScreen class="screen_top" @resize="mapRef.resize()"><Map ref="mapRef" /></FullScreen>
				<FullScreen class="screen_bottom" @resize="rankRef.resize()"><Rank ref="rankRef" /></FullScreen>
			</div>
			<div class="screen_right">
				<FullScreen class="screen_top" @resize="hotRef.resize()"><Hot ref="hotRef" /></FullScreen>
				<FullScreen class="screen_bottom" @resize="stockRef.resize()"><Stock ref="stockRef" /></FullScreen>
			</div>
		</div>
	</div>
</template>

<style scoped lang="scss">
	.screen_container {
		width: 100%;
		height: 100%;
		overflow: hidden;
		box-sizing: border-box;
		padding: 0 20px;
		background-color: #161522;
		color: #fff;
		.screen_header {
			width: 100%;
			position: relative;
			height: 64px;
			background: url('@/assets/img/header_border_dark.png') no-repeat center -4px;
			background-size: 100% 100%;
			font-size: 20px;
			display: flex;
			align-items: center;
			justify-content: space-between;
			img {
				width: 100%;
			}
			.logo {
				width: 48px;
				height: 30px;
			}
			.title {
				position: absolute;
				left: 50%;
				transform: translateX(-50%);
				margin-top: 12px;
			}
			.title-right {
				display: flex;
				align-items: center;
				margin-bottom: 14px;
				.hf {
					width: 28px;
					height: 21px;
					cursor: pointer;
				}
				.datetime {
					margin-left: 10px;
					font-size: 15px;
				}
			}
		}
		.screen_body {
			width: 100%;
			height: calc(100% - 54px);
			margin-top: 10px;
			display: flex;
			.screen_left {
				width: 28%;
				height: 100%;
				.screen_top {
					width: 100%;
					height: 53%;
				}
				.screen_bottom {
					width: 100%;
					height: 42%;
					margin-top: 3%;
				}
			}
			.screen_center {
				width: 42%;
				height: 100%;
				margin: 0 1%;
				.screen_top {
					width: 100%;
					height: 56%;
				}
				.screen_bottom {
					width: 100%;
					height: 38%;
					margin-top: 3%;
				}
			}
			.screen_right {
				width: 28%;
				height: 100%;
				.screen_top {
					width: 100%;
					height: 49%;
				}
				.screen_bottom {
					width: 100%;
					height: 44%;
					margin-top: 6%;
				}
			}
		}
	}
</style>
